<template>
	<view>
		<view>
			<table-title content="收楼办理表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>
			<view v-if="state==='待确认配置' || state==='已办结'">
				<small-title content="家私配置清单"></small-title>
				<view class="download-text" @click="downloadFile(0)">家私配置清单.docx</view>
				<small-title content="租赁合同文件"></small-title>
				<view v-for="(item,index) in pdfFileId" class="download-text" @click="downloadFile(1,index)">租赁合同{{index + 1}}.pdf</view>
				<small-title content="租赁到期日期"></small-title>
				<view class="small-title">
					<uni-datetime-picker type="date" :value="endDate" start="" end="" @change="change" :disabled="true"></uni-datetime-picker>
					
				</view>
			</view>
			<small-title v-if="state!=='待申请'" content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="state==='待确认配置'" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="qfConfirm(3)">确认配置</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open">需整改</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" message="成功消息" title="请输入整改意见" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<l-file
		    ref="lFile" 
			@up-success="upSuccess"
		></l-file>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrder
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				recordId: -1,
				processNo:'待分配',
				state: '已受理',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				goodList:[],
				docxFileId:0,
				pdfFileId:[],
				endDate:'',
				nopassReasons:'',
				proccessListDefult:[],
				token:'',
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
				if(value == ""){
					uni.showModal({
						content:'意见不能为空',
						showCancel:false
					});
					this.$refs.popup.close()
				}else{
					this.nopassReasons = "租户未确认配置清单，交付内容需要整改，描述：" + value
					this.qfConfirm(1)
					// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
					// ...
					this.$refs.popup.close()
				}
			},
			
			downloadFile(fileType,index){
				let fileId = 0
				if(fileType == 0){
					fileId = this.docxFileId
				}else{
					fileId = this.pdfFileId[index]
				}
				if(!(parseInt(fileId) > 0)){
					uni.showModal({
						content:'找不到该文件,请检查是否已上传。',
						showCancel:false
					})
					return 0
				}
				this.$refs.lFile.download({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/file/download/` + fileId,
					token:this.token,
				})
				.then(path=>{
				    // 打开文件
				    this.$refs.lFile.open(path);
				});
			},
			
			qfConfirm(status){
				console.log("[info]","收楼：" + this.recordId)
				let commentMsg = ''
				if(status == 3){
					commentMsg = '租户已确认配置清单'
				}else{
					commentMsg = this.nopassReasons
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/handover/qf-confirm/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						status:status,
						commentMsg:commentMsg,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("收楼成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("收楼调用失败")
					}
				})
			},
			
			getOrder(){
				let a = syncGetOrder("handover/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 switch(parseInt(res.data.data.status)) {
						      case 0:
						         this.state = "待合同上传"
						         break;
						      case 1:
						         this.state = "待管家上传"
						         break;
						 	 case 2:
						         this.state = "待确认配置"
						 	    break;
						 	 case 3:
						         this.state = "已办结"
						 	    break;
						      default:
						         this.state = "待申请"
						 } 
						 console.log("详细",res.data.data)
						 this.processNo = res.data.data.processNo
						 try{
						 	let tempArray = res.data.data.contractFileId.split(',')
						 	tempArray.forEach((item,index) => {
									this.pdfFileId.push(item)
									let tempIndex = index + 1
									let temp ='租赁合同' + tempIndex + '.pdf'
						 	})
						 }catch(e){
						 	//TODO handle the exception
						 }
						 try{
						 	this.endDate = res.data.data.dueTime.replace('T', ' ')
						 }catch(e){
						 	//TODO handle the exception
						 }
						 this.docxFileId = res.data.data.configFileId
						 this.proccessListDefult=processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
					}
				})
			},
			
			back(){
				uni.navigateBack()
			},
		},
		onLoad(option) {
			//传入单号
			let userInfo = uni.getStorageSync('userinfo')
			if(userInfo != null){
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
				// console.log(`${ONLINE_SERVER_ADDRESS_BASE}/goods-release/finish/` + this.recordId)
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.download-text {
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  border: none;
	  font: normal 16px/1 "Times New Roman", Times, serif;
	  color: rgba(18,25,232,1);
	  text-decoration: underline;
	  -o-text-overflow: ellipsis;
	  text-overflow: ellipsis;
	  margin-left: 60rpx;
	  margin-bottom: 10rpx;
	}
	.small-title{
		margin: 20rpx 0 20rpx 50rpx;
	}
</style>
